//__dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录
const webpack = require('webpack');
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
let htmlWebpackPlugin = require("html-webpack-plugin");

module.exports = { //注意这里是exports不是export
    mode: "development",
    entry: {
        index: "./src/index.js",
        hello: "./src/hello.js"
    }, //配置多入口
    output: { //输出目录
        // 这个是指定项目打包后的输出目录,__dirname就是webpack.config.js所在的目录,这里就是打包时打包到项目根目录下的build文件夹下(如没有webpack会自己创建)
        path: path.resolve(__dirname, './build'),//默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到"build"目录）
        // 这个是关系到我们项目发布后，一些资源的访问路径问题，后面会讲到，而且这个也跟我们开发时候的热部署有关，让他指向我们的打包后的路径就行。
        publicPath: "build/",
        //打包后输出的js的文件名
        filename: '[name].js',//[name]可实现多出口 直接bundle.js的话打包后只有一个js文件
    },
    devServer: {
        contentBase: path.join(__dirname, "./build"), //静态文件根目录
        // contentBase: "./build", //本地服务器所加载的页面所在的目录
        host: 'localhost',      // 默认是localhost
        historyApiFallback: true, //不跳转
        inline: true, //实时刷新
        open: true, // 自动打开浏览器
        hot: true,// 开启热更新
        port: 3000 //设置默认监听端口，如果省略，默认为"8080"
    },

    plugins: [
        // 打包前先清空
        // new CleanWebpackPlugin(),// 这个开启后，执行 run server 之后，build里的文件也被清除了
        //根目录的index.html生成dist下的html，多new几个就可多个页面生成
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            hash: true,
            inject: 'body', //script标签的放置
            title: 'index title test',
            minify: { //html压缩
                removeComments: true, //移除注释
                collapseWhitespace: true //移除空格
            },
            chunks: ['index', 'hello'],      //生成html页面后的script文件的引入
            //排除没有用到的script文件，其他的都引进来，比chunks更好匹配
            // excludeChunks: ['index', 'hello'] //引入了index.js和main.js
        }),
        new htmlWebpackPlugin({
            filename: 'test.html',
            template: 'test.html',
            hash: true,
            chunks: ['hello'],      //生成html页面后的script文件的引入
        }),
        //css3前缀要放在插件里，与webpack1的用法不同
        new webpack.LoaderOptionsPlugin({
            options: {
                postcss: [
                    require("autoprefixer")({
                        "overrideBrowserslist": [
                            "> 1%",
                            "last 2 versions",
                            "Android >= 3.2",
                            "Firefox >= 20",
                            "iOS 7"
                        ]
                    })
                ]
            }
        }),
        //热模块替换插件：热替换，热替换不是刷新
        new webpack.HotModuleReplacementPlugin()
    ],
    module: {
        rules: [ //1.0的是loaders
            //处理js中的loader
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: path.resolve(__dirname, '/src'), //指定打包的文件
                exclude: path.resolve(__dirname, '/node_modules') //排除打包的文件，加速打包时间
            },
            //处理css中的loader
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader?importLoaders=1!postcss-loader' //@import进来的样式在问号后加 
            },
            //处理sass中的loader
            {
                test: /\.scss$/,
                loader: 'style-loader!css-loader!postcss-loader!sass-loader'
            },
            //处理html模板中的loader
            // {
            //     test: /\.html$/,
            //     loader: 'html-loader'
            // },
            //处理ejs模板中的loader,以.tpl后缀结尾的
            {
                test: /\.tpl$/,
                loader: 'ejs-loader'
            },
            //页面中经常会用到img标签，img引用的图片地址也需要一个loader来帮我们处理好
            {
                test: /\.(htm|html)$/,
                use: 'html-withimg-loader'
            },
            //处理图片中的loader,file-loader,url-loader,image-webpack-loader相互配合(图片格式转换base64 图片压缩)
            {
                test: /\.(png|jpg|gif|svg)$/i, //模板中的图片放相对路径: src="${require('../imgs/aaa.jpg')}"
                loader: 'url-loader',
                options: {
                    limit: 8192,    // 小于8k的图片自动转成base64格式，并且不会存在实体图片
                    outputPath: 'images/'   // 图片打包后存放的目录
                }
            }
        ]
    }
};